<template>
	<!-- 游览 -->
	<view class="content">
		<view class="topImg">
			<image src="https://tenfei04.cfp.cn/creative/vcg/800/version23/VCG41157432835.jpg" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="m_nav">
				<view class="banner">
					<image src="/static/img/6.png" mode="widthFix"></image>
					<view class="title">景点介绍</view>
				</view>
				<view class="banner">
					<image src="/static/img/7.png" mode="widthFix"></image>
					<view class="title">游客服务</view>
				</view>
				<view class="banner">
					<image src="/static/img/8.png" mode="widthFix"></image>
					<view class="title">智能客服</view>
				</view>
				<view class="banner">
					<image src="/static/img/5.png" mode="widthFix"></image>
					<view class="title">银杏游记</view>
				</view>
			</view>
			<!-- 地图导览 -->
			<view class="map">
				<view class="title">
					地图导览
				</view>
				<view class="m_content">
					<view class="mapBgImg">
						<image src="https://tenfei04.cfp.cn/creative/vcg/800/version23/VCG41157432835.jpg"
							mode="widthFix"></image>
					</view>
					<view class="text">
						<text>
							千年银杏谷
							导览地图\n
						</text>
						<view class="goTo">立即体验 ></view>
					</view>
				</view>
			</view>
			<!-- 云游银杏谷 -->
			<view class="cloudVisit">
				<view class="title">
					VR银杏谷
				</view>
				<view class="c_top">
					<view class="topBgImg">
						<image src="https://tenfei04.cfp.cn/creative/vcg/800/version23/VCG41157432835.jpg"
							mode="widthFix"></image>
					</view>
					<view class="text">
						<text>云游银杏谷\n</text>
						<view class="goTo">立即开启 ></view>
					</view>

				</view>
				<view class="c_content">
					<navigator url="/pages/subpage/introduce/introduce">
						<view class="listImg">
							<view class="l_img">
								<image src="https://img.walltu.com/d/file/hengtu/2018-12/ogv5iubn4va.jpg">
								</image>
							</view>
							<view class="l_text">爱情树</view>
						</view>
					</navigator>
					<view class="listImg">
						<view class="l_img">
							<image src="https://img.walltu.com/d/file/hengtu/2018-12/ogv5iubn4va.jpg">
							</image>
						</view>
						<view class="l_text">十里画廊</view>
					</view>
				</view>
				<view class="more">
					展开更多 {{more ? '∧':'∨'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				more:false
			}
		},
		created() {
		},
		onShow() {
			this.more = false
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;

	.topImg {
		height: 300rpx;
		width: 750rpx;
		overflow: hidden;

		image {
			width: 750rpx;
		}
	}

	.main {
		margin-top: -@radius;
		width: 686rpx;
		border-radius: @radius;
		background-color: @color7;
		padding: @interval3;
	}

	.m_nav {
		display: flex;
		justify-content: space-between;

		.banner {
			text-align: center;

			image {
				width: ceil((750 - 64) / 5rpx);
				height: ceil((750 - 64) / 5rpx);
			}

			.title {
				font-size: @h3;
			}
		}
	}

	.map .title,
	.cloudVisit .title {
		margin-top: @interval3;
		margin-bottom: @interval4;
	}

	.m_content,
	.c_top {
		position: relative;
		width: 686rpx;
		height: 300rpx;

		.mapBgImg,
		.topBgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 686rpx;
			height: 300rpx;
			overflow: hidden;
			border-radius: @radius;

			image {
				width: 686rpx;
			}
		}

		.text {
			position: absolute;
			left: @interval3;
			top: 0;
			padding-top: 100rpx;
		}

		.goTo {
			display: inline-block;
			margin-top: 10rpx;
			background-color: @color7;
			padding: 0 10rpx;
			line-height: 1.5;
			border-radius: 10rpx;
			font-size: @text;
		}
	}

	.c_content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.listImg {
			position: relative;
			.l_img {
				width: ceil((686 - @interval4) / 2);
				height: 220rpx;
				border-radius: @radius;
				overflow: hidden;
				font-size: 0;
				margin-top: @interval4;
				image {
					width: ceil((686 - @interval4) / 2);
					height: 220rpx;
				}
			}
			.l_text{
				width: ceil((686 - @interval4) / 2);
				text-align: center;
				position: absolute;
				left: 0;
				bottom: @interval4;
				color: #FFF;
				font-size: @h3;
			}
		}
	}
	.more{
		margin-top: @interval3;
		text-align: center;
	}
</style>
